<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>诗瑶博客移动端主页</title>
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入当前页面样式 -->
    <link rel="stylesheet" href="./y-css/y-index.css">
</head>
<body>
    <!-- 头部 -->
    <div class="header-top">
      <img src="./image/topImg.jpg">
      <div class="menu-icon"></div>
    </div>
     <!-- 标题 -->
     <div class="header-title">
        <div class="top-head">&nbsp;瑶瑶日记</div>
        <div class="top-content">
            <p>瑶瑶,</p><br>
            <p>可爱的瑶瑶,</p><br>
            <p>可可爱爱的小诗瑶</p>
         </div>
      </div>
        <!-- 搜索框 -->
        <div class="search bar">
           <form class="form1">
             <input type="text" placeholder="请输入您要搜索的瑶瑶...">
             <button type="submit"></button>
          </form>
        </div>
        <!-- 内容区 -->
        <div class="index-content">
            <div class="content" id="six">  
                <img src="./image/666.jpg">
                <img src="./image/6666.jpg">
                <div class="content-wz">
                    <p class="content-title">《小瑶瑶YYDS》</p>
                    <p class="content-autho">发布时间&nbsp;:&nbsp;&nbsp;2024-09-07</p>
                    <p class="content-text">瑶瑶,小瑶瑶,可可爱爱的小诗瑶,今天的瑶瑶很可爱</p>
                </div> 
             </div>
             <div class="content" id="five"> 
                <img src="./image/555.jpg">
                <img src="./image/5555.jpg">
                <div class="content-wz">
                    <p class="content-title">《拽拽的瑶瑶》</p>
                    <p class="content-autho">发布时间&nbsp;:&nbsp;&nbsp;2024-08-26</p>
                    <p class="content-text">瑶瑶,小瑶瑶,可可爱爱的小诗瑶,今天的瑶瑶很拽拽</p>
                </div>             
             </div>
             <div class="content" id="four"> 
                <img src="./image/444.jpg">
                <img src="./image/4444.jpg">
                <div class="content-wz">
                    <p class="content-title">《特效瑶瑶》</p>
                    <p class="content-autho">发布时间&nbsp;:&nbsp;&nbsp;2024-08-08</p>
                    <p class="content-text">瑶瑶,小瑶瑶,可可爱爱的小诗瑶,特效版瑶瑶,今天的瑶瑶很特效</p>
                </div>
             </div>
             <div class="content" id="three">         
                <img src="./image/333.jpg">
                <img src="./image/3333.jpg">
                <div class="content-wz">
                    <p class="content-title">《瑶瑶穿新衣》</p>
                    <p class="content-autho">发布时间&nbsp;:&nbsp;&nbsp;2024-07-21</p>
                    <p class="content-text">瑶瑶,小瑶瑶,可可爱爱的小诗瑶,今天的瑶瑶很穿新衣</p>
                </div>  
             </div>
             <div class="content" id="two">
                <img src="./image/2222.jpg">
                <img src="./image/222.jpg">
                <div class="content-wz">
                    <p class="content-title">《开心瑶瑶》</p>
                    <p class="content-autho">发布时间&nbsp;:&nbsp;&nbsp;2024-07-12</p>
                    <p class="content-text">瑶瑶,小瑶瑶,可可爱爱的小诗瑶,今天的瑶瑶很开心</p>
                </div>
             </div>
             <div class="content" id="one">
                <img src="./image/1111.jpg">
                <img src="./image/111.jpg">
                <div class="content-wz">
                    <p class="content-title">《酷酷瑶瑶》</p>
                    <p class="content-autho">发布时间&nbsp;:&nbsp;&nbsp;2024-07-12</p>
                    <p class="content-text">瑶瑶,小瑶瑶,可可爱爱的小诗瑶,今天的瑶瑶很酷酷</p>
                </div>
             </div>
        </div>
        <div class="page-end">
        </div>
        <div class="footer">
            <div class="foot one"><a href="yd.html">首页</a></div>
            <div class="foot two"><a href="yd-detail.html">瑶瑶日记</a></div>
            <div class="foot three"><a href="yd-vedio.html">关于瑶瑶</a></div>
            <div id="myDiv" class="foot four"><a href="#">联系我们</a></div>
          </div>
   
    
    <!-- 弹窗的HTML结构 -->
    <div id="myModal" class="modal">
        <!-- 模态内容 -->
        <div class="modal-content">
        <span class="close">&times;</span>
        <p>欢迎加入瑶瑶公主粉丝团--章爸爸周妈妈！</p>
        </div>
    </div>


<script>
    // 定义跳转函数
    document.addEventListener('DOMContentLoaded', function() {
    var clickableElements = document.getElementsByClassName('content');
    for (var i = 0; i < clickableElements.length; i++) {
        if(clickableElements[i].getAttribute('id')=='six'){
                clickableElements[i].addEventListener('click', function() {
                window.location.href = 'yd-detail-six.html';
            });
        }
        if(clickableElements[i].getAttribute('id')=='five'){
                clickableElements[i].addEventListener('click', function() {
                window.location.href = 'yd-detail-five.html';
            });
        }
        if(clickableElements[i].getAttribute('id')=='four'){
                clickableElements[i].addEventListener('click', function() {
                window.location.href = 'yd-detail-four.html';
            });
        }
        if(clickableElements[i].getAttribute('id')=='three'){
                clickableElements[i].addEventListener('click', function() {
                window.location.href = 'yd-detail-three.html';
            });
        }
        if(clickableElements[i].getAttribute('id')=='two'){
                clickableElements[i].addEventListener('click', function() {
                window.location.href = 'yd-detail-two.html';
            });
        }
        if(clickableElements[i].getAttribute('id')=='one'){
                clickableElements[i].addEventListener('click', function() {
                window.location.href = 'yd-detail-one.html';
            });
        }
    }
});

// 获取元素
var myDiv = document.getElementById('myDiv');
var myModal = document.getElementById('myModal');
var span = document.getElementsByClassName("close")[0];
 
// 当点击div时显示弹窗
myDiv.onclick = function() {
  myModal.style.display = "block";
}
 
// 当点击关闭按钮时隐藏弹窗
span.onclick = function() {
  myModal.style.display = "none";
}
 
// 当点击其他地方时（除了弹窗和关闭按钮）隐藏弹窗
window.onclick = function(event) {
  if (event.target == myModal) {
    myModal.style.display = "none";
  }
}
</script>
</body>


</html>